در CSS می‌توان به روش‌های مختلفی رنگ‌ها را مقداردهی کرد. در زیر همه این روش‌ها را نام برده و در ادامه آموزش به بررسی تک به تک آنها می‌پردازیم.

نام رنگ‌ها
کد رنگ HEX
سیستم RGB و RGBa
سیستم HSL و HSLa
نکته: به غیر از نام رنگ‌ها که تعدادشان محدود است، تعداد رنگ‌های موجود در دیگر روش‌ها باهم یکسان هستند. به عبارتی هر رنگ می‌تواند بصورت HEX یا RGB یا HSL مقداردهی شود.

 اگر نمیدونین که css چی هست بهتون مطالعه مقاله css چیه و چه کاربردی داره رو پیشنهاد میکنم

استفاده از نام رنگ‌ها در CSS
با این روش بخوبی آشنا هستید. تا این جلسه از آموزش تنها از نام رنگ‌ها استفاده کرده‌ایم. همانطور که می‌دانید در این روش تنها کافیست تا نام یک رنگ را بنویسید. در تصویر زیر نام چند رنگ پر استفاده را آورده‌ایم.

پراستفاده‌ترین نام رنگ‌ها در CSS
توجه: لیست کامل نام رنگ‌ها را می‌توانید از این لینک مشاهده کنید.

استفاده از کد رنگ HEX در CSS
این روش، روش محبوب طراحان وبسایت است. می‌توان گفت در طراحی صفحات وب، بیشتر رنگ‌ها از طریق کد رنگ HEX تعریف می‌شوند.

کد رنگ HEX از ۶ رقم تشکیل می‌شود. ۲ رقم اول مقدار رنگ قرمز، ۲ رقم دوم مقدار رنگ سبز و ۲ رقم سوم مقدار رنگ آبی را تعیین می‌کنند. تمام این ارقام در مبنای ۱۶ هستند یعنی می‌توانند از 00 تا FF باشند. (در مبنای ۱۰ می‌شود از صفر تا ۲۵۵). کاراکتر # ابتدای این کد نماد اعداد مبنای ۱۶ است.

سیستم کد رنگ HEX
بنابراین با کم و زیاد کردن مقدار هر یک از این رنگ‌ها، یک رنگ جدید به وجود می‌آید. می‌توان محاسبه کرد که با استفاده از این اعداد جمعاً می‌توان ۱۶٫۷۷۷٫۲۱۶ رنگ تولید کرد!

کار با کد رنگ hex
اصلا نگران نباشید! قرار نیست همه این کدها را حفظ کنید. حتی این مفاهیم هم فقط برای اطلاعات عمومی شما گفته شده است. استفاده از این کدها بسیار آسان است. اگر نرم افزار‌های گرافیکی مانند photoshop را دارید تنها کافیست از color picker آن استفاده کنید.

دریافت کد رنگ Hex از فتوشاپ
اگر فتوشاپ ندارید می‌توانید عبارت color picker را در گوگل جستجو کنید و از جعبه انتخاب رنگ گوگل برای دریافت کد رنگ Hex استفاده کنید.

استفاده از سیستم RGB و RGBa در CSS
RGB مخفف عبارت Red Green Blue است. نحوه عملکرد آن دقیقا مشابه کد رنگ Hex است با این تفاوت که به جای اعداد مبنای ۱۶ از اعداد مبنای ۱۰ استفاده می‌کند. یعنی می‌توانید به هر رنگ یک عدد از صفر تا ۲۵۵ اختصاص دهید.

در CSS سیستم RGB بصورت یک تابع طراحی شده که ۳ پارامتر دریافت می‌کند. پارامتر اول مقدار رنگ قرمز، پارامتر دوم مقدار رنگ سبز و پارامتر سوم مقدار رنگ آبی است.

سیستم RGB در CSS
در تصویر زیر مثال‌هایی از تعیین رنگ توسط سیستم RGB را مشاهده می‌کنید.

مثال‌های از سیستم RGB
در color picker های مختلف (که دو نمونه را در بالا معرفی کردیم) هر رنگی را که انتخاب کنید، مقدار RGB رنگ را هم مشخص می‌کنند که می‌توانید از این مقدار استفاده کنید.

دریافت RGB از Color Picker گوگل

سیستم رنگ RGBa
سیستم رنگ RGBa هم مانند RGB است، اما تابع ()rgba یک پارامتر اضافه به نام alpha می‌گیرد که مقدار شفافیت رنگ را تعیین می‌کند. این مقدار عددی بین 0 تا 1 است، 0 یعنی کاملا شفاف و شیشه‌ای و 1 یعنی بدون شفافیت. به مثال‌های زیر دقت کنید:

مثال‌هایی از سیستم RGBa

استفاده از سیستم HSL و HSLa در CSS
نحوه عملکرد سیستم HSL کاملا با RGB و کد Hex متفاوت است. HSL مانند RGB یک تابع در CSS است که ۳ پارامتر می‌گیرد. اما پارامتر‌های آن دیگر درصد هر رنگ را تعیین نمی‌کنند.

پارامتر اول hue است که درجه رنگ در چرخه رنگ (color wheel) را تعیین می‌کند. این پارامتر می‌تواند عددی از صفر تا 360 باشد.

چرخه رنگ
پارامتر دوم Saturation است که یک مقدار درصدی است، این پارامتر درصد اشباع رنگ را تعیین می‌کند. 0٪ کاملا خاکستری است و 100٪ بصورت کامل رنگ را نشان می‌دهد.

پارامتر سوم Lightness است، این پارامتر هم یک مقدار درصدی است که درصد تیرگی یا روشنایی رنگ را تعیین می‌کند. 0٪ کاملا تیره و 100٪ کاملا روشن است.

مثال‌های از سیستم HSL

سیستم رنگ HSLa
سیستم رنگ HSLa هم مانند HSL است، اما تابع ()hsla یک پارامتر اضافه به نام alpha می‌گیرد که مقدار شفافیت رنگ را تعیین می‌کند. این مقدار عددی بین 0 تا 1 است، 0 یعنی کاملا شفاف و شیشه‌ای و 1 یعنی بدون شفافیت. به مثال‌های زیر دقت کنید:

سیستم hsla در CSS

همچنین در انتهای این مقاله بهتون مطالعه فریمورک css چیست رو پیشنهاد میکنم تا حتما حتما بخونین و اطلاعات بیشتری درباره این ابزار قدرتمند بدست بیارین
تمام سیستم‌ رنگ‌ها در CSS را معرفی کردیم. از تمام این روش‌ها می‌توانید در مواقعی که نیاز به رنگ دارید استفاده کنید. مانند مقداردهی به ویژگی color یا background-color. برای مثال:

/* Color Name */
background-color: red;

/* Hex */
background-color: #ff0000;

/* RGBA and RGBa */
background-color: rgb(255,0,0);
background-color: rgba(255,0,0,0.5);

/* HSL and HSLa */
background-color: hsl(360,100%,50%);
background-color: hsla(360,100%,50%,0.5);

منبع: ادمین سایت